<template>
  <div>
    <a-layout>
      <a-layout-header style="backgroundColor: RGB(255,255,255);fontSize:16px">
        Blockchain
        <a-dropdown style="float: right;marginRight: 30px;">
          <a class='ant-dropdown-link' @click="e => e.preventDefault()">
            登录
            <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a href="javascript:;">设置</a>
            </a-menu-item>
          </a-menu>
        </a-dropdown>
        <a-avatar
          icon="user"
          style="float: right; marginLeft:20px;marginRight: 10px; marginTop: 17px"
        />
      </a-layout-header>
      <a-layout-content style="padding: 0 0 0 0;height: 800px">
        <div>
          <transition name="zoom-fade" mode="out-in">
            <a-row type="flex" class="rowbg" style="height:815px;padding:50px 20px;" > 
              <a-col :flex="2"></a-col>
              <a-col :flex="3">
                <div class="main" style="width:500px;height:400px;backgroundColor:#ECF8FE">
                  <h1 style="textAlign:center;margin:20px 0">登录</h1>
                  <Loginx></Loginx>
                </div>
              </a-col>
            </a-row>
          </transition>
        </div>
      </a-layout-content>
      <a-layout-footer style="textAlign: center;backgroundColor:#FFFFFF">
        ©2021-2023 Blockchain Log Storage Platform by Yuxi
      </a-layout-footer>
    </a-layout>
  </div>
</template>
<script>
import Loginx from "../components/loginx.vue";
export default {
  name: "Login",
  components: {
    Loginx,
  },
  methods: {
    navi(s) {
      this.$router.push(s);
    },
  }
};
</script>
<style scoped>
.bg {
  background-image: url(../assets/image/adminbg.png);
}
.HolyGrail {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

header,
footer {
  flex: 1;
}

.HolyGrail-body {
  display: flex;
  flex: 1;
}

.HolyGrail-content {
  flex: 1;
}

.HolyGrail-nav, .HolyGrail-ads {
  flex: 0 0 43em;
}

.HolyGrail-nav {
  order: -1;
}

.zoom-fade-enter-active,
.zoom-fade-leave-active {
  transition: transform 0.35s, opacity 0.28s ease-in-out;
}

.zoom-fade-enter-from {
  opacity: 0;
  transform: scale(0.97);
}

.zoom-fade-leave-to {
  opacity: 0;
  transform: scale(1.03);
}

@media (max-width: 1000px) {
  .HolyGrail-body {
    flex-direction: column;
    flex: 1;
  }
  .HolyGrail-nav,
  .HolyGrail-ads,
  .HolyGrail-content {
    flex: auto;
  }
}

.centerflex {
  justify-content: center;
  align-items: center;
}

.main {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -200px;
  margin-top: -200px;
  padding: 20px;
  border: 1px double #6aaee8;
  border-radius: 25px;
  box-shadow: 5px 2px 6px #d0d0d0;
}

.rowbg {
  background:url(../assets/image/rowbg4.jpg) no-repeat center center;
  background-size:cover;
}
</style>